<template>
	<view>
		<comHeader :config="navConfig"/>
		<navigator class="add" url="/pages/my/myTicket/myAddMessage/addMessage">
			<view><image class="xinxi" src="../../../static/myPic/addMessage.png"></image></view>
			<view class="addText">添加常用信息</view>
			<view><image class="jiantou" src="../../../static/jiantou.png"></image></view>
		</navigator>
		
		<view class="card">
			<view class="card-list">
				<view class="card-item" v-for="(item,index) in cardData" :key='index'>
					<view class="name">{{item.name}}</view>
					<view><image class="namePic" :src="item.kuang"></image></view>
					<view class="shenfenz">{{item.shenfenz}}</view>
					<view class="IDcard">{{item.IDcard}}</view>
					<view class="xuankuang">
						<!-- <checkbox class="one" value="cb" checked="true" color="#FF9B00" style="transform:scale(0.5)" /> -->
						<view class="moren"><checkbox class="one" value="cb" checked="true" color="#2F8FFF" style="transform:scale(0.5)" /><text>{{item.morenMessage}}</text></view>
						<view class="BJ"><image src="../../../static/myPic/piaoBianJi.png"></image><text>编辑</text></view>
						<view class="SC"><image src="../../../static/myPic/shanle.png"></image><text>删除</text></view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="card">
			<view class="card-list">
				<view class="card-item" v-for="(item,index) in IDcardData" :key='index'>
					<view class="name">{{item.name}}</view>
					<view><image class="namePic" :src="item.kuang"></image></view>
					<view class="shenfenz">{{item.shenfenz}}</view>
					<view class="IDcard">{{item.IDcard}}</view>
					<view class="xuankuang">
						<!-- <checkbox class="one" value="cb" checked="true" color="#FF9B00" style="transform:scale(0.5)" /> -->
						<view class="moren"><checkbox class="one" value="cb" color="#2F8FFF" style="transform:scale(0.5)" /><text>{{item.morenMessage}}</text></view>
						<view class="BJ"><image src="../../../static/myPic/piaoBianJi.png"></image><text>编辑</text></view>
						<view class="SC"><image src="../../../static/myPic/shanle.png"></image><text>删除</text></view>
					</view>
				</view>
			</view>
		</view>
		
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navConfig:{
					comScroll:0,
					isFixed:false, //是否absolute布局
					left:{
						
						isShowLeft:true,
						leftGobackColor:'black', //左边返回icon颜色
					},
					mid:{
						isShowMid:true,
						text:'常用信息'
					},
					right:{
						text:'',
						isShowRight:false,
					}
				},
				cardData:[
					{
						name:'陈乔坤',
						kuang:'/static/myPic/duihao.png',
						shenfenz:'身份证',
						IDcard:'220***********3654',
						chose:'/static/myPic/chose.png',
						morenMessage:'默认信息'
					}
				],
				IDcardData:[
					{
						name:'王锦柊',
						shenfenz:'身份证',
						IDcard:'211***********3655',
						chose:'/static/myPic/noChose.png',
						morenMessage:'设为默认'
					}
				]
			}
		},
	}
</script>

<style>
	.add{
		width: 690upx;
		height: 80upx;
		margin-left: 31upx;
		margin-top: 150upx;
		border-radius: 10upx;
		border: 1upx #B6B6B6;
		background: #FFFFFF;
		box-shadow: 0upx 0upx 15upx 0upx #E8E8E8;
	}
	.xinxi{
		width: 31upx;
		height: 30upx;
		/* float: left; */
		margin-left: 29upx;
		margin-top: 25upx;
	}
	.addText{
		width: 250upx;
		height: 29upx;
		line-height: 29upx;
		font-size: 32upx;
		font-family: PingFang SC Regular;
		color: #2E8EFF;
		margin-left: 17upx;
		margin-bottom: 27upx;
	}
	.jiantou{
		width: 20upx;
		height: 25upx;
		color: #A7A7A7;
		margin-left: 308upx;
	}
	.add>view{display: inline-block;}
	.card-item{
		width: 690upx;
		height: 232upx;
		margin-left: 31upx;
		margin-top: 18upx;
		border-radius: 10upx;
		border: 1upx #B6B6B6;
		background: rgba(255,255,255,1);
		box-shadow: 0px 0px 15px 0px rgba(232,232,232,1);
	}
	.name{
		width: 90upx;
		height: 30upx;
		line-height: 29upx;
		font-size: 30upx;
		color: #333333;
		font-family: PingFang SC Bold;
		font-weight: bold;
		margin-left: 29upx;
		margin-top: 38upx;
		float: left;
	}
	.namePic{
		width: 29upx;
		height: 21upx;
		margin-left: 24upx;
		margin-top: 45upx;
	}
	.name>view{display: inline-block;}
	.shenfenz{
		width: 84upx;
		height: 28upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: rgba(153,153,153,1);
		margin-left: 29upx;
		margin-top: 10upx;
		float: left;
	}
	.IDcard{
		width: 280upx;
		height: 28upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: rgba(153,153,153,1);
		margin-left: 202upx;
		margin-top: 10upx;
	}
	.moren .one{
		width: 24upx;
		height: 23upx;
		margin-left: 31upx;
		margin-top: 50upx;
		float: left;
	}
	.moren text{
		width: 125upx;
		height: 24upx;
		line-height: 24upx;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: rgba(47,143,255,1);
		margin-left: 20upx;
		margin-top: 60upx;
		float: left;
	}
	.moren{
		/* float: left; */
	}
	.BJ{
		float: left;
	}
	.BJ image{
		margin-left: 275upx;
		margin-top: 60upx;
		width: 24upx;
		height: 24upx;
	}
	.BJ text{
		margin-top: 60upx;
		margin-left: 13upx;
		width: 48upx;
		height: 24upx;
		line-height: 24upx;
		opacity: 1;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: rgba(102,102,102,1);
	}
	.SC image{
		margin-top: 60upx;
		width: 22upx;
		height: 24upx;
		margin-left: 46upx;
	}
	.SC text{
		margin-top: 60upx;
		margin-left: 13upx;
		width: 48upx;
		height: 24upx;
		line-height: 24upx;
		opacity: 1;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: rgba(102,102,102,1);
	}
	.bianshan{
		display: inline-block;
	}
	/* .xuankuang{
		width:345upx;
		height: 50upx;
	}
	.xuankuang>view{display: inline-block;} */
</style>
